<template>
  <div class="article-page">
    <!-- 装饰性背景元素 -->
    <div class="decoration-bg">
      <div class="floating-line line-1"></div>
    </div>

    <!-- 添加固定操作栏 -->
    <div class="floating-action-bar">
      <el-tooltip class="item" effect="dark" content="点赞" placement="right">
        <div class="action-item" @click="toggleLike">
          <el-badge :value="article.likeNum || 0" class="item">
            <div class="action-button">
              <el-icon :class="{ active: article.isLike }"><StarFilled /></el-icon>
            </div>
          </el-badge>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="收藏" placement="right">
        <div class="action-item" @click="toggleFavorite">
          <el-badge :value="article.favoriteNum || 0" class="item">
            <div class="action-button">
              <el-icon :class="{ active: article.isFavorite }"><Star /></el-icon>
            </div>
          </el-badge>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="沉浸式浏览" placement="right">
        <div class="action-item" @click="toggleSidebar">
          <div class="action-button">
            <el-icon><FullScreen /></el-icon>
          </div>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="评论" placement="right">
        <div class="action-item" @click="scrollToComments">
          <el-badge :value="article.commentCounts || 0" class="item">
            <div class="action-button">
              <el-icon><ChatDotSquare /></el-icon>
            </div>
          </el-badge>
        </div>
      </el-tooltip>
    </div>

    <!-- 文章容器 -->
    <div class="article-container" :class="{ center: !showSidebar }">
      <!-- 文章内容区 -->
      <div class="article-content">
        <article class="article-card">
          <!-- 文章头部信息 -->
          <header v-if="article.title" class="article-header">
            <h1 class="article-title">{{ article.title }}</h1>

            <div class="article-meta">
              <div class="meta-row">
                <div class="meta-group">
                  <div class="meta-item">
                    <i class="icon-icon"></i>
                    <span>发表于 {{ article.createTime?.toString().split(" ")[0] }}</span>
                  </div>
                  <div class="meta-item">
                    <i class="icon-shijian1"></i>
                    <span>更新于 {{ (article.updateTime || article.createTime)?.toString().split(" ")[0] }}</span>
                  </div>

                </div>
              </div>

              <div class="meta-row">
                <div class="meta-group">
                  <div class="meta-item">
                    <i class="icon-Word"></i>
                    <span>{{ article.fontCounts }} 字</span>
                  </div>
                  <div class="meta-item">
                    <i class="icon-shijian"></i>
                    <span>阅读 {{ article.readTime }} 分钟</span>
                  </div>
                  <div class="meta-item category-item">
                    <i class="icon-fenlei"></i>
                    <router-link :to="'/categories/' + article.categoryId" class="category-link">
                      {{ article.categoryName }}
                    </router-link>
                  </div>
                </div>
                <div class="meta-group">
                  <div class="meta-item">
                    <i class="icon-xianshi"></i>
                    <span>{{ article.viewCounts }} 次阅读</span>
                  </div>
                  <div class="meta-item">
                    <i class="icon-chat"></i>
                    <span>{{ article.commentCounts }} 条评论</span>
                  </div>
                </div>
              </div>
            </div>
          </header>

          <!-- Markdown内容 -->
          <div class="markdown-content">
            <MarkdownRenderer
              :content="article.content || ''"
              ref="markdownRenderer"
            />
          </div>

          <!-- 版权声明 -->
          <div v-if="article.title" class="article-copyright">
            <div><span>创作类型：</span>{{ article.isOriginal === 0 ? '原创' : '转载' }}</div>
            <div v-if="article.isOriginal === 0">
              <span>文章作者：</span>
              <router-link to="/">林中月</router-link>
            </div>
            <div><span>文章链接：</span><a :href="articleHref" target="_blank">{{ articleHref }}</a></div>
            <div v-if="article.isOriginal === 1">
              <span>原文链接：</span>
              <a :href="article.originalUrl" target="_blank">{{ article.originalUrl }}</a>
            </div>
            <div>
              <span>版权声明：</span>本博客所有文章除特别声明外，均采用
              <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>
              许可协议。转载请注明文章出处。
            </div>
          </div>

          <!-- 文章标签 -->
          <div v-if="article.tags?.length" class="article-tags">
            <span class="tags-title">
              <i class="icon-24gf-tags"></i>
              标签：
            </span>
            <span v-for="tag in article.tags" :key="tag" class="tag-item">{{ tag }}</span>
          </div>

          <!-- 评论区域 -->
          <div class="article-comment">
            <Comment :blogId="article.id" @updateCommentCount="updateCommentCount"></Comment>
          </div>
        </article>
      </div>
    </div>

    <!-- 目录侧边栏 - 独立于主容器 -->
    <div
        v-if="article.title && tocLoaded && showSidebar && titles.length > 0"
        class="toc-sidebar"
        ref="tocSidebar"
        :class="{ expanded: tocExpanded }"
        @click="toggleMobileToc"
    >
      <div class="toc-container">
        <div class="toc-header">
          <i class="icon-ai-kind"></i>
          <span>目录</span>
          <div class="reading-progress">
            <span class="progress-text">{{ Math.round(readingProgress) }}%</span>
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: readingProgress + '%' }"></div>
            </div>
          </div>
        </div>
        <nav class="toc-nav" @click.stop>
          <div
              v-for="(anchor, index) in titles"
              :key="`toc-${index}`"
              :style="{ paddingLeft: `${anchor.indent * 20 + 16}px` }"
              @click="handleAnchorClick(anchor, index)"
              :class="['toc-item', { active: currentActiveIndex === index }]"
          >
            <a href="#" @click.prevent>{{ anchor.title }}</a>
            <div class="toc-indicator"></div>
          </div>
        </nav>
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import {useRoute} from "vue-router";
import {getCurrentInstance, nextTick, onMounted, onUnmounted, ref, watch} from "vue";
import request from 'utils/request.js';
import Comment from "../../components/Comment.vue";
import MarkdownRenderer from "../../components/MarkdownRenderer.vue";
import { DocumentCopy, Check, StarFilled, Star, FullScreen, ChatDotSquare } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

// 响应式数据
const route = useRoute();
const article = ref<any>({});
const newsArticle = ref([]);
const articleHref = window.location.href;
const {proxy}: any = getCurrentInstance();
const markdownRenderer = ref();
const titles = ref<any[]>([]);
const tocSidebar = ref();

// 目录和阅读进度
const readingProgress = ref(0);
const currentActiveIndex = ref(0);
const isScrolling = ref(false);
const tocLoaded = ref(false);

// 布局相关状态
const navBarHeight = ref(60); // 导航栏高度
const notificationHeight = ref(0); // 通知栏高度
const footerHeight = ref(0); // 页脚高度
const footerTop = ref(0); // 页脚顶部位置
const isMobile = ref(false); // 是否为移动端
const tocExpanded = ref(false); // 移动端目录是否展开
const showSidebar = ref(true); // 是否显示侧边栏

// 获取推荐文章
const getNewsArticle = () => {
  request.get("/blog/getNewsArticle").then((res: any) => {
    newsArticle.value = res.data;
  });
};

// 检查是否为移动端
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 1200;
  if (!isMobile.value) {
    tocExpanded.value = false;
  }
};

// 切换移动端目录显示
const toggleMobileToc = () => {
  if (isMobile.value) {
    tocExpanded.value = !tocExpanded.value;
  }
};


// 更新评论数量
const updateCommentCount = (count: number) => {
  if (article.value) {
    article.value.commentCounts = count;
  }
};

// 获取页面布局信息
const getLayoutInfo = () => {
  checkMobile();

  // 获取导航栏高度
  const navBar = document.querySelector('.navbar-container');
  navBarHeight.value = navBar ? navBar.offsetHeight : 60;

  // 获取通知栏高度
  const notification = document.querySelector('.top-notification');
  notificationHeight.value = notification ? notification.offsetHeight : 0;
};

// 更新目录位置
const updateTocPosition = () => {
  if (!tocSidebar.value || isMobile.value) return;

  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const articleContainer = document.querySelector('.article-container');
  if (!articleContainer) return;

  // 计算固定头部高度
  const fixedHeaderHeight = navBarHeight.value + notificationHeight.value + 20;

  // 获取文章容器的位置信息
  const containerRect = articleContainer.getBoundingClientRect();
  const containerTopInPage = containerRect.top + scrollTop;

  let tocTopPosition;

  if (scrollTop < containerTopInPage - fixedHeaderHeight) {
    // 文章还未进入固定区域，目录与文章容器对齐
    tocTopPosition = containerTopInPage;
  } else {
    // 文章进入固定区域，目录固定在头部下方
    tocTopPosition = fixedHeaderHeight;
  }

  tocSidebar.value.style.top = `${tocTopPosition}px`;
};

// 计算阅读进度
const calculateReadingProgress = () => {
  if (!tocLoaded.value) return;

  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const articleContent = document.querySelector('.markdown-content');

  if (!articleContent) {
    readingProgress.value = 0;
    return;
  }

  const contentTop = articleContent.offsetTop;
  const contentHeight = articleContent.offsetHeight;
  const contentBottom = contentTop + contentHeight;

  if (scrollTop < contentTop) {
    readingProgress.value = 0;
  } else if (scrollTop + windowHeight >= contentBottom) {
    readingProgress.value = 100;
  } else {
    const contentScrolled = scrollTop - contentTop;
    const visibleContentHeight = contentHeight - windowHeight;
    const progress = Math.max(0, (contentScrolled / visibleContentHeight) * 100);
    readingProgress.value = Math.min(100, progress);
  }

  // 更新目录位置
  updateTocPosition();

  if (!isScrolling.value) {
    updateActiveTitle(scrollTop);
  }
};

// 更新当前激活的标题
const updateActiveTitle = (scrollTop: number) => {
  if (!titles.value.length) return;

  const markdownContent = document.querySelector('.markdown-content');
  if (!markdownContent) return;

  const headings = titles.value.map((title: any, index: number) => {
    const elements = markdownContent.querySelectorAll(`h${title.level}`);
    const element = elements[title.index];
    return {
      index,
      element,
      offsetTop: element ? element.offsetTop : 0
    };
  }).filter(item => item.element);

  let activeIndex = 0;
  for (let i = headings.length - 1; i >= 0; i--) {
    if (scrollTop + 100 >= headings[i].offsetTop) {
      activeIndex = headings[i].index;
      break;
    }
  }

  currentActiveIndex.value = activeIndex;
};

// 平滑跳转到指定标题
const handleAnchorClick = (anchor: any, index: number) => {
  const markdownContent = document.querySelector('.markdown-content');
  if (!markdownContent) return;

  // 获取所有标题元素
  const allHeadings = markdownContent.querySelectorAll('h1,h2,h3,h4,h5,h6');
  const targetHeading = allHeadings[index];

  if (targetHeading) {
    isScrolling.value = true;
    currentActiveIndex.value = index;

    // 使用 scrollIntoView 方法，更准确
    const offsetTop = navBarHeight.value + notificationHeight.value + 20;
    
    // 先滚动到目标位置附近
    targetHeading.scrollIntoView({ behavior: 'smooth', block: 'start' });
    
    // 然后微调位置以考虑固定头部
    setTimeout(() => {
      const rect = targetHeading.getBoundingClientRect();
      const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const adjustment = rect.top - offsetTop;
      
      if (Math.abs(adjustment) > 5) { // 只在需要调整时才滚动
        window.scrollTo({
          top: currentScrollTop + adjustment,
          behavior: 'smooth'
        });
      }
    }, 100);

    setTimeout(() => {
      isScrolling.value = false;
    }, 1000);
  }
};


// 初始化目录
const initializeToc = async () => {
  await nextTick();

  // 直接查找 markdown-content 容器中的标题
  const markdownContent = document.querySelector('.markdown-content');
  if (!markdownContent) return;

  const anchors = markdownContent.querySelectorAll('h1,h2,h3,h4,h5,h6');
  const validTitles = Array.from(anchors).filter((title: any) => !!title.innerText.trim());

  if (!validTitles.length) {
    titles.value = [];
    tocLoaded.value = true;
    return;
  }

  const hTags = Array.from(new Set(validTitles.map((title: any) => title.tagName))).sort();

  titles.value = validTitles.map((el: any, index: number) => ({
    title: el.innerText,
    level: parseInt(el.tagName.substring(1)),
    index: index,
    indent: hTags.indexOf(el.tagName)
  }));

  // 获取布局信息
  getLayoutInfo();

  // 等待DOM完全渲染后初始化目录
  setTimeout(() => {
    tocLoaded.value = true;
    // 添加loaded类用于显示动画
    if (tocSidebar.value) {
      tocSidebar.value.classList.add('loaded');
    }
    updateTocPosition();
    calculateReadingProgress();
  }, 200);
};

// 监听路由变化
watch(() => route.params.articleId, async (newId, oldId) => {
  if (newId && newId !== oldId) {
    // 滚动到页面顶部
    window.scrollTo({ top: 0, behavior: 'smooth' });
    
    // 重新加载文章内容
    try {
      const res = await request.get(`/blog/getArticleById/${newId}`);
      article.value = res.data.data;
      
      // 重新初始化目录
      nextTick(() => {
        setTimeout(() => {
          initializeToc();
        }, 500);
      });
    } catch (error) {
      console.error('Failed to load article:', error);
    }
  }
});

// 监听文章内容变化，重新初始化目录
watch(() => article.value.content, () => {
  if (article.value.content) {
    nextTick(() => {
      setTimeout(() => {
        initializeToc();
      }, 500);
    });
  }
});

// 组件挂载
onMounted(async () => {
  // 确保页面滚动到顶部
  window.scrollTo({ top: 0, behavior: 'smooth' });
  
  getNewsArticle();

  try {
    const res = await request.get(`/blog/getArticleById/${route.params.articleId}`);
    article.value = res.data.data;

    // 等待内容渲染完成后初始化目录
    await nextTick();
    setTimeout(() => {
      initializeToc();
      window.addEventListener('scroll', calculateReadingProgress, {passive: true});
      window.addEventListener('resize', () => {
        getLayoutInfo();
        updateTocPosition();
        checkMobile();
      }, {passive: true});
    }, 500);
  } catch (error) {
    console.error('Failed to load article:', error);
  }
});

// 点赞功能
const toggleLike = () => {
  ElMessage.info('点赞功能开发中，敬请期待');
};

// 收藏功能
const toggleFavorite = () => {
  ElMessage.info('收藏功能开发中，敬请期待');
};

// 沉浸式浏览
const toggleSidebar = () => {
  showSidebar.value = !showSidebar.value;
};

// 评论跳转
const scrollToComments = () => {
  const commentsSection = document.querySelector('.article-comment');
  if (commentsSection) {
    commentsSection.scrollIntoView({ behavior: 'smooth' });
  }
};


// 组件卸载
onUnmounted(() => {
  window.removeEventListener('scroll', calculateReadingProgress);
  window.removeEventListener('resize', updateTocPosition);
});
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.scss';

.article-page {
  background: var(--gradient-page);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* 装饰性背景元素 */
.decoration-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}


.floating-line {
  position: absolute;
  background: var(--bg-decoration);
  animation: lineFloat 8s ease-in-out infinite;
  width: 150px;
  height: 2px;
  top: 40%;
  right: 8%;
  transform: rotate(45deg);
  animation-delay: 2s;
}


@keyframes lineFloat {
  0%, 100% {
    transform: translateX(0px) rotate(45deg);
    opacity: 0.6;
  }
  50% {
    transform: translateX(10px) rotate(50deg);
    opacity: 0.3;
  }
}

/* 文章容器布局 */
.article-container {
  max-width: 1000px;
  margin: 0px auto 60px;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* 大屏幕时为文章容器留出目录和工具栏空间 */
@media (min-width: 1201px) {
  .article-container {
    margin-right: 400px; /* 目录宽度300px + 工具栏80px + 边距40px */
  }

  .article-container.center {
    margin-right: auto;
    margin-left: auto;
    max-width: 1000px;
  }
}

/* 文章卡片 */
.article-card {
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-warm);
}

/* 文章头部 */
.article-header {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 2px solid #f0f0f0;
  position: relative;
}

.article-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--gradient-primary);
}

.article-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 24px 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.article-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meta-group {
  display: flex;
  gap: 24px;
  align-items: center;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 14px;
}

.meta-item i {
  color: var(--primary-color);
  font-size: 16px;
}

.category-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.category-link:hover {
  color: var(--primary-dark);
}

/* Markdown内容样式 */
.markdown-content {
  margin-bottom: 40px;
}

/* 版权声明 */
.article-copyright {
  margin: 40px 0;
  font-size: 0.875rem;
  line-height: 2;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border-left: 4px solid #667eea;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.article-copyright span {
  color: #667eea;
  font-weight: bold;
}

.article-copyright a {
  color: #667eea !important;
  text-decoration: none !important;
}

.article-copyright a:hover {
  text-decoration: underline !important;
}

/* 文章标签 */
.article-tags {
  margin: 40px 0;
  padding: 16px 24px;
  background: var(--gradient-primary);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.tags-title {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
}

.tag-item {
  display: inline-block;
  margin: 4px 8px 4px 0;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  transition: all 0.3s ease;
}

.tag-item:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* 评论区域 */
.article-comment {
  margin-top: 40px;
}

/* 目录侧边栏 - 完全独立定位 */
.toc-sidebar {
  position: fixed;
  top: 120px; /* 给导航栏和通知栏留出空间 */
  right: 50px;
  width: 300px;
  z-index: 999;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(20px);
}

.toc-sidebar.loaded {
  opacity: 1;
  transform: translateX(0);
}

.toc-container {
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-height: calc(100vh - 140px);
  transition: all 0.3s ease;
  border: 1px solid rgba(227, 242, 253, 0.3);
}

.toc-header {
  background: var(--gradient-primary);
  color: white;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
}

.toc-header i {
  font-size: 18px;
}

.reading-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.progress-text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  min-width: 32px;
}

.progress-bar {
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bg-primary), rgba(255, 255, 255, 0.8));
  border-radius: 2px;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.toc-nav {
  padding: 16px 0;
  overflow-y: auto;
  max-height: 500px;
}

.toc-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  position: relative;
}

.toc-item:hover {
  background: var(--bg-hover);
  border-left-color: #667eea;
}

.toc-item:hover a {
  color: #667eea;
}

.toc-item.active {
  background: var(--bg-hover);
  border-left-color: #667eea;
}

.toc-item.active a {
  color: #667eea;
  font-weight: 600;
}

.toc-item.active .toc-indicator {
  opacity: 1;
  transform: scale(1);
}

.toc-item a {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s ease;
}

.toc-indicator {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 6px;
  height: 6px;
  background: var(--primary-color);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}




/* 响应式设计 */
@media (max-width: 1400px) {
  .toc-sidebar {
    width: 280px;
    right: 15px;
  }
}

@media (max-width: 1200px) {
  .toc-sidebar {
    position: fixed;
    top: auto;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    z-index: 1001;
  }

  .toc-sidebar:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
  }

  .toc-sidebar::before {
    content: '\e609';
    font-family: 'iconfont';
    color: white;
    font-size: 24px;
  }

  .toc-container {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 100px; /* 往左移动，避开工具栏 */
    width: 320px;
    max-height: 60vh;
    z-index: 1002;
  }

  .toc-sidebar.expanded .toc-container {
    display: block;
    animation: slideUp 0.3s ease;
  }

  .toc-sidebar.expanded::before {
    content: '\e60a';
  }

  @keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .article-container {
    max-width: 800px;
    margin-top: 40px;
    padding: 0 15px;
  }

  .article-title {
    font-size: 2rem;
  }

  .meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .meta-group {
    gap: 16px;
  }

  .meta-item {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .article-title {
    font-size: 1.75rem;
  }

  .meta-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .meta-item {
    font-size: 12px;
  }

  .article-container {
    padding: 0 10px;
    margin-top: 20px;
  }

  .article-header {
    margin-bottom: 30px;
    padding-bottom: 24px;
  }

  .article-card {
    padding: 24px;
  }
}

/* 悬浮操作栏样式 */
.floating-action-bar {
  position: fixed;
  left: 10px;
  top: 40%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 12px;
  border-radius: 16px;
  z-index: 100;
}

@media (max-width: 1200px) {
  .floating-action-bar {
    display: none;
  }
}

.floating-action-bar .action-item {
  cursor: pointer;
}

.floating-action-bar .action-button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.floating-action-bar .action-button i {
  font-size: 18px;
  color: #666;
  transition: all 0.3s ease;
}

.floating-action-bar .action-button i.active {
  color: #667eea;
}

.floating-action-bar .action-item:hover .action-button {
  background: rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.floating-action-bar .action-item:hover .action-button i {
  color: #667eea;
  transform: scale(1.1);
}
</style>
